<template>
  <div>
    <div class="title"> 购物车</div>
    <div class="cart-conntent">
      <div >

        <div class="empty" v-if="cartdata.length === 0">
          <img src="https://bpic.588ku.com/element_water_pic/19/04/10/690d86f5d498908371fdd0a5e16e2bd2.jpg" >
         <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" to="./home">
          去购物
        </van-button>
        </div>

       <van-swipe-cell v-for="item ,index in cartdata" :key="index">
      <div class="cart-list" >
       
          <van-card
            :num="item.cartnum"
            :price="item.price.toFixed(2)"
            desc="描述信息"
            :title="item.name"
            :thumb="item.imgs.split('||')[0]"
          />
          <van-checkbox v-model="item.select" />
          <van-stepper v-model="item.cartnum" @change="numChange()" />
          
      </div>
      <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="delGood(index)" />
          </template>
        </van-swipe-cell>
        </div>
    </div>

    <van-submit-bar :price="total*100" button-text="提交订单" @submit="$router.push( '/placeorder')">
      <van-checkbox v-model="checkAll">全选</van-checkbox>
    </van-submit-bar>
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from "@components/tabbar";
export default {
  data() {
    return {
      cartdata: JSON.parse(localStorage.getItem("buycart"))?JSON.parse(localStorage.getItem("buycart")):[],
      total: 0,
    };
  },
  
  methods: {
    onSubmit() {
      console.log(2);
    },
    numChange() {
      localStorage.setItem("buycart", JSON.stringify(this.cartdata));
      this.$store.commit('changeNum')
    },
   
    delGood(index){
      this.cartdata.splice(index,1)
       localStorage.setItem("buycart", JSON.stringify(this.cartdata));
    }
   
  },
  components: {
    tabbar,
  },
  computed: {
    checkAll: {
      get() {
        if(!this.cartdata){
          return 0
        }
        console.log(this.cartdata);
        if(!this.cartdata){
          return[]
        }
        this.total = 0;
        this.cartdata.forEach((item) => {
          if (item.select) {
            this.total += item.price * item.cartnum;
            console.log(this.total);
          }
           localStorage.setItem("buycart", JSON.stringify(this.cartdata));
        });

        return this.cartdata.every((item) => {
          if (item.select) {
          }
          this.total;
          return item.select;
        });
      },


      set(val) {
      
       if(this.cartdata.length===0){
          return 0
        }
          this.cartdata.forEach((item) => {
            item.select = val;
          });
        
        localStorage.setItem("buycart", JSON.stringify(this.cartdata));
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.title{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 46px;
  text-align: center;
  line-height: 46px;
font-weight: 600;
  font-size: 18px;
  z-index: 100;
  background-color: #fff;
}
.van-submit-bar {
  margin-bottom: 46px;
  border-bottom: 1px #eee solid;
}
.cart-conntent {
  width: 100%;
 
  overflow-y: auto;
  padding-top: 46px;
  padding-bottom: 100px;
}
.cart-list {
  position: relative;

  background: #fff;
 
  border-radius: 10px 0 0 10px;
  padding: 20px 10px 10px 30px;
  .van-stepper {
    text-align: right;
    padding-right: 10px;
    margin-bottom: 10px;
  }
  .van-checkbox {
    position: absolute;
    top: 45%;
    left: 10px;
  }
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.delete-button{
  border-radius: 0 10px 10px 0;
  overflow: hidden;
}
.van-swipe-cell{
  width: 90%;
  overflow-x: hidden;
  border-radius: 20px;
  
  margin: 10px 5%;
}
.empty{

  width:100%;
  padding:20px 10px 0;
  box-sizing: border-box;
  img{
    width: 100%;
    display: block;
  }
  .van-button--normal{
    border-radius: 15px;
    height: 40px;
    width: 100px;
  }
}
</style>